<template>
  <div class="son-container">
    <div class="top">
      <div class="top_left">
        <div class="fanhui-btn" @click="$emit('back')">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </div>
        <div class="lujing">
          <span>当前位置：主动预警/子模块状态</span>
        </div>
      </div>

      <menu-element />
    </div>
    <div class="statistics">
      <div class="left" ref="left">
        <sec-container title="子模块统计">
          <div class="sec-container-content">
            <div class="item" :class="item.label == '正常'
              ? 'normal'
              : item.label == '严重'
                ? 'breakdown'
                : 'abnormity'
              " v-for="(item, index) in countList" :key="index + 'first'">
              <span class="value">{{ item.count }}</span>
              <span class="title">{{ item.label }}</span>
            </div>
          </div>
        </sec-container>
        <sec-container title="监测点告警统计">
          <div class="right-box">
            <div class="right-box-item">
              <page-table :tableData="alarmDistribution.description" :tableLabel="colSData" :showSelection="false"
                :table-height="tableHeight" @handleLink="handle"></page-table>
            </div>
            <div class="right-box-item">
              <div class="chart-wrapper">
                <bar-chart :xAxis="alarmDistribution.xAxis" :datas="alarmDistribution.data" :rotate="45"></bar-chart>
              </div>
            </div>
          </div>
        </sec-container>
        <sec-container title="监测点告警明细">
          <div class="scroll">
            <div @click="boXinClick(item)" v-for="(item, index) in warnList" :key="index + 'third'" class="item">
              <p>{{item.message  }}</p>
              <div class="tip">
                <span>{{ item.time }}</span>
                <el-tag type="" color="#075d78" size="mini">{{
                  item.name
                }}</el-tag>
              </div>
            </div>
          </div>
        </sec-container>
      </div>
      <div class="right">
        <sec-container title="子模块列表">
          <div class="sec-container-content">
            <sonModuleItem v-for="item in modulesList" class="module-item" :key="item.name" :id="item.name"
              :name="item.name" :state="item.state" @qiaobiClick="qiaobiClick(item)"></sonModuleItem>
          </div>
        </sec-container>
      </div>
    </div>
    <pubDialog :dialogVisible="detailDialog.visible" type="default" :title="dialogTitle" btnType="2" top="10vh"
      cancelText="关闭" @dialogSubmit="dialogConfirm" @dialogCancel="dialogCancel"
      @switchVisable="detailDialog.visible = false">
      <el-tabs v-model="activeTabName" type="border-card">
        <el-tab-pane name="data" label="数据">
          <sec-container title="子模块数据分析表">
            <div class="sec-container-content1">
              <showItem class="item" @showItem="showItem" v-for="(item, key) in activeModuleDetail.list"
                :key="key + 'fif'" :data="item"></showItem>
            </div>
          </sec-container>

          <sec-container title="子模块评估结果" style="margin-top: 16px">
            <div class="sec-container-content2">
              <div class="msg-box">
                <div class="state">
                  <span>当前状态：</span>
                  <span class="state-msg" v-html="sonModuleStatus"></span>
                </div>
                <div class="result" v-if="sonModuleStatus !== '正常'">
                  <p>
                    子模块<span>{{ sonModuleStatus }}</span>原因:
                  </p>
                  <div v-html="faultLocalization"></div>
                </div>
              </div>
              <div class="chart-box">
                <GaugeChart :datas="GaugeChartDatas"></GaugeChart>
              </div>
            </div>
          </sec-container>
        </el-tab-pane>

        <!-- <el-tab-pane name="chart" label="告警分析">
          <div class="chart-wrapper oscillogram">
            <div class="left">
              <sec-container title="最新告警">
                <div class="scroll dialog-scroll">
                  <div @click="warnClick(item)" v-for="(item, index) in warnNewList" :key="index + 'third'"
                    class="item">
                    <p>
                      {{
                        item.stationName +
                        item.controlName +
                        item.armName +
                        item.modelName
                      }}
                    </p>
                    <div class="tip">
                      <span>{{ item.time }}</span>
                      <el-tag type="" color="#075d78" size="mini">{{
                        item.pointName
                        }}</el-tag>
                    </div>
                  </div>
                </div>
              </sec-container>
            </div>
            <div class="right">
              <sec-container title="告警解析">
                <h3>故障定位</h3>
                <p>{{ this.criterion }}</p>
                <h3>数据采集波形图</h3>
                <div class="chart-box">
                  <el-form ref="form" :model="dialog.form" inline label-width="130px" class="form-search">
                    <el-form-item>
                      <el-date-picker style="width: 400px" v-model="dialog.form.date" start-placeholder="开始日期"
                        end-placeholder="结束日期" type="datetimerange" :unlink-panels="true"
                        value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" clearable>
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                      <el-button class="btn-nav-bg stripe-btn" @click="handleSearch">查询</el-button>
                    </el-form-item>
                  </el-form>
                  <div class="chart-box">
                    <linebar style="width: 100%; height: 300px" :grid="grid" legendLeft="80%" :rotate="-15"
                      :axisLabelColor="'rgba(198,211,236)'" :datas="dialog.chartData.data"
                      :xAxis="dialog.chartData.xAxis" :isShowTooltip="true"></linebar>
                  </div>
                </div>
              </sec-container>
            </div>
          </div>
        </el-tab-pane> -->
      </el-tabs>
    </pubDialog>

    <pub-dialog :title="dialog.boXinTitle" :top="'10vh'" :dialogVisible="dialog.visible"
      dialogVisableRef="dialogVisible" @switchVisable="switchVisable" @dialogCancel="dialogCancelBo" class="dialog"
      btnType="2">
      <el-form ref="form" :model="dialog.form" inline label-width="130px" class="form-search">
        <el-form-item>
          <el-date-picker style="width: 400px" v-model="dialog.form.date" start-placeholder="开始日期"
            end-placeholder="结束日期" type="datetimerange" :unlink-panels="true" value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button class="btn-nav-bg stripe-btn" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="chart-box">
        <linebar style="width: 100%; height: 450px" :grid="grid" legendLeft="80%" :rotate="-15"
          :axisLabelColor="'rgba(198,211,236)'" :datas="dialog.chartData.data" :xAxis="dialog.chartData.xAxis"
          :isShowTooltip="true"></linebar>
      </div>
    </pub-dialog>
  </div>
</template>
<script>
import SecContainer from "@/components/SecContainer";
import pubDialog from "@/components/pubDialog.vue";
import sonModuleItem from "./sonModuleItem.vue";
import showItem from "./showItem.vue";
import GaugeChart from "./GaugeChart.vue";
import Linebar from "@/components/Linebar";
import MenuElement from "@/components/MenuElement/index.vue";
import {
  getModel,
  getMeasure,
  getXJHistoryPointWaveform,
  getXJHistoryAlarmAnalyse,
  getModelZhongdu,
  getMeasureZhongdu
} from "@/api/earlyWarning";
import PageTable from "@/components/PageTable.vue";
import BarChart from "@/components/BarChart.vue";

export default {
  name: "ItemWrap",
  props: {
    currentIdOfsonModule: { type: String },
    stationName: { type: String },
    controlName: { type: String },
    bridgeName: { type: String },
    id: {
      type: String,
      default: "",
    },
    zhengfuValue: { type: String },
    qiaobiName: { type: String },
  },
  components: {
    BarChart,
    PageTable,
    SecContainer,
    // qiaobi,
    sonModuleItem,
    pubDialog,
    showItem,
    GaugeChart,
    // radarChart,
    Linebar,
    MenuElement,
  },
  watch: {
    '$route'(to, from) {
      this.$emit('back')
    }
  },
  data() {
    return {
      faultLocalization: '', //  故障定位
      modulesList: [],
      countList: [
        { label: "正常", count: "", state: 0 },
        { label: "异常", count: "", state: 1 },
        { label: "严重", count: "", state: 2 },
      ],
      detailDialog: {
        visible: false,
        title: "",
        data: [],
      },
      dialogTitle: "",
      activeTabName: "data",
      activeAllModuleDetail: [],
      curMeasureVOList: {},
      activeModuleDetail: {
        list: [],
      },
      alarmDistribution: {
        data: [
          {
            name: "测点告警",
            color: ["#83d3f6", "#1ea9ed"],
            barWidth: 8,
            data: [],
          },
        ],
        xAxis: [],

        description: [],
        chartData: {
          areaColor: "#05D5FF",
          radarData: {},
          data: [
            {
              value: [],
            },
          ],
          indicator: [{ name: "", max: 100 }],
        },
      },
      form: {
        module: "",
      },
      paramAry: [
        {
          label: "电容容值",
          value: "电容容值",
        },
        {
          label: "模块温度",
          value: "模块温度",
        },
        {
          label: "模块电压",
          value: "模块电压",
        },
        {
          label: "开关频率",
          value: "开关频率",
        },
      ],
      grid: {
        containLabel: true,
        left: "2%",
        top: "24",
        right: "20%",
        bottom: "10%",
      },
      faultAllTime: [],
      curTimeData: [],
      realTimeData: [],
      curTime: "",
      timeList: [],
      xTimeList: [],
      param: {},

      colSData: [
        { label: "告警点", param: "label" },
        { label: "告警子模块数", param: "value", link: true },
      ],
      tableHeight: 189,

      sonModuleStatus: "",
      GaugeChartDatas: null,
      warnList: [],
      originRadarData: [],

      dialog: {
        boXinTitle: "",
        visible: false,
        form: {
          date: [],
          type: "",
        },
        chartData: {
          data: [
            {
              type: "line",
              name: "",
              color: "#5087ec",
              showSymbol: true,
              smooth: true,
              data: [],
            },
          ],
          xAxis: [],
        },
      },
      cause: "",
      model: "",

      warnNewList: [],

      criterion: "",
    };
  },
  created() {
    this.calcHeight();
    this.getInit();
    // this.initWebSocket();
  },
  beforeMount() { },
  mounted() { },
  destroyed: function () {
    // 离开页面生命周期函数
    this.websocketOnclose();
  },
  methods: {
    calcHeight() {
      this.tableHeight = (window.innerHeight - 158 - 32) * 0.4 - 65;
    },
    getInit() {
      this.getModelData();
    },
    // 切换雷达图展示
    changeRadar(data) {
      let array = [];
      data.forEach((item) => {
        this.originRadarData.forEach((ele) => {
          if (item === ele.pointName) {
            array.push(ele);
          }
        });
      });

      this.alarmDistribution.chartData.data[0].value = array.map(
        (item) => item.count
      );
      this.alarmDistribution.chartData.indicator = array.map((item) => {
        return { name: item.pointName };
      });
    },
    async getModelData() {
      if (this.$route.query.site === '阜康换流站') {
        let result = await getModel(this.qiaobiName, this.zhengfuValue, '阜康换流站');
        // 子模块列表
        this.modulesList = result.data.moduleInfos;
        // 子模块状态统计
        this.countList.forEach((item) => {

          if (item.label === "正常") {
            item.count = result.data.normal;
          } else if (item.label === "严重") {
            item.count = result.data.t0;
          } else if (item.label === "异常") {
            item.count = result.data.t1;
          }
        });
        // 监测点告警统计
        this.alarmDistribution.description = result.data.counts.map(
          (item) => {
            return {
              label: item.name,
              value: item.count,
              labelClassName: "my-label-header",
              contentClassName: "my-content-header",
            };
          }
        );
        this.originRadarData = result.data.counts;
        this.alarmDistribution.data[0].data = result.data.counts.map(
          (item) => item.count
        );
        this.alarmDistribution.xAxis = result.data.counts.map(
          (item) => item.name
        );
        // 故障信息
        this.warnList = result.data.infos;

      } else {
        let result = await getModelZhongdu( this.qiaobiName,this.zhengfuValue,'中都换流站');
       // 子模块列表
        this.modulesList = result.data.moduleInfos;
        // 子模块状态统计
        this.countList.forEach((item) => {

          if (item.label === "正常") {
            item.count = result.data.normal;
          } else if (item.label === "严重") {
            item.count = result.data.t0;
          } else if (item.label === "异常") {
            item.count = result.data.t1;
          }
        });
        // 监测点告警统计
        this.alarmDistribution.description = result.data.counts.map(
          (item) => {
            return {
              label: item.name,
              value: item.count,
              labelClassName: "my-label-header",
              contentClassName: "my-content-header",
            };
          }
        );
        this.originRadarData = result.data.counts;
        this.alarmDistribution.data[0].data = result.data.counts.map(
          (item) => item.count
        );
        this.alarmDistribution.xAxis = result.data.counts.map(
          (item) => item.name
        );
        // 故障信息
        this.warnList = result.data.infos;

      }



      // this.alarmDistribution.description.unshift({
      //   label: "告警点",
      //   value: "告警子模块",
      //   labelClassName: "my-label-header",
      //   contentClassName: "my-content-header",
      // });

    },
    // 点击子模块
    qiaobiClick(item) {
      this.dialogTitle = item.name + "详情";
      this.detailDialog.visible = true;
      this.param = {
        controlName: this.zhengfuValue,
        bridgeName: this.qiaobiName,
        submoduleName: item.name,
      };
      this.xTimeList = JSON.parse(localStorage.getItem("timeList"));
      this.getMeasureData();

      let params = {
        stationName: this.stationName,
        controlName: this.controlName,
        bridgeName: this.bridgeName,
        modelName: item.name,
      };
      this.getXJHistoryAlarmAnalyseData(params);
      // 请求数据
    },
    dialogConfirm() {
      this.detailDialog.visible = false;
    },
    dialogCancel() {
      this.detailDialog.visible = false;
    },
    // 点击清零按钮重新查询数据
    showItem() {
      this.getMeasureData();
    },
    // 子模块测点实时数据
    getMeasureData(name) {
      const { controlName, bridgeName, submoduleName } = this.param;
      if (this.$route.query.site === '阜康换流站') {
        getMeasure(bridgeName, controlName, '阜康换流站' , submoduleName).then((res) => {
          if (res.code == 200) {

            this.activeModuleDetail.list = [];
            // this.activeAllModuleDetail = res.data.runDwDetailFukangVOs;

            res.data.dwInfos.map((item) => {
              this.activeModuleDetail.list.push({
                name: item.pointName,
                value: item.pointValue,
                unit: item.pointUnit,
                state: item.state,
                id: item.pointName,
                // pointKey: item.pointKey,
              });
            });
            this.faultLocalization = res.data.faultLocalization ? res.data.faultLocalization.replace(/\n/g, "<br>") : '';
            if (res.data.state === 0) {
              this.sonModuleStatus = "正常";
              this.GaugeChartDatas = 40;
            } else if (res.data.state === 1) {
              this.sonModuleStatus = "异常";
              this.GaugeChartDatas = 60;
            } else if (res.data.state === 2) {
              this.sonModuleStatus = "故障";
              this.GaugeChartDatas = 90;
            }
          }
        });
      } else {
        getMeasureZhongdu(bridgeName, controlName, '中都换流站' , submoduleName).then((res) => {
          if (res.code == 200) {

            this.activeModuleDetail.list = [];

            res.data.dwInfos.map((item) => {
              this.activeModuleDetail.list.push({
                name: item.pointName,
                value: item.pointValue,
                unit: item.pointUnit,
                state: item.state,
                id: item.pointName,
                // pointKey: item.pointKey,
              });

            });
             this.faultLocalization = res.data.faultLocalization ? res.data.faultLocalization.replace(/\n/g, "<br>") : '';
            if (res.data.state === 0) {
              this.sonModuleStatus = "正常";
              this.GaugeChartDatas = 40;
            } else if (res.data.state === 1) {
              this.sonModuleStatus = "异常";
              this.GaugeChartDatas = 60;
            } else if (res.data.state === 2) {
              this.sonModuleStatus = "故障";
              this.GaugeChartDatas = 90;
            }
          }
        });
      }

    },
    async websocketOnopen() {
      console.log("WebSocket连接成功");
    },
    websocketOnerror(e) {
      console.log("WebSocket连接发生错误");
      this.reconnect();
    },
    websocketOnmessage(e) {
      // 收集当时时间并存储
      this.curTime = this.$moment().format("HH:mm");
      this.timeList.push(this.curTime);
      localStorage.setItem("timeList", JSON.stringify(this.timeList));
      this.getInit();
      this.getMeasureData(this.param);
      var data = eval("(" + e.data + ")"); //解析对象
    },
    websocketOnclose(e) {
      this.reconnect();
    },
    websocketSend(text) {
      // 数据发送
      try {
        this.websock.send(text);
      } catch (err) {
        console.log("send failed (" + err.code + ")");
      }
    },

    reconnect() {
      var that = this;
      if (that.lockReconnect) return;
      that.lockReconnect = true;
      //没连接上会一直重连，设置延迟避免请求过多
      setTimeout(function () {
        console.info("尝试重连...");
        that.initWebSocket();
        that.lockReconnect = false;
      }, 5000);
    },

    // 监听弹窗关闭
    switchVisable(visable, ref) {
      this[ref] = visable;
    },
    // 关闭弹窗
    dialogCancelBo() {
      this.dialog.visible = false;
    },
    handleSearch() {
      if (this.cause === '') {
        this.$message({
          message: "请选择告警点",
          type: "warning",
        });
        return
      }
      let params = {
        bridgeName: this.bridgeName,
        controlName: this.controlName,
        startDate: this.dialog.form.date[0],
        pointName: this.cause,
        endDate: this.dialog.form.date[1],
        stationName: this.stationName,
        submoduleName: this.model,
      };
      this.getXJHistoryPointWaveformData(params);
    },
    handle(e, row, index) {
      let arr = JSON.parse(JSON.stringify(this.warnList));

      arr.sort((a, b) => {
        if (a.cause === row.label) {
          return -1;
        } else if (b.cause === row.label) {
          return 1;
        } else {
          return 0;
        }
      });

      this.$nextTick(() => {
        this.warnList = arr;
      });
    },
    boXinClick(item) {
      // this.qiaobiClick({
      //   modelName: item.name,
      // });
      // console.log("🚀 item => ", item);
      // this.dialog.visible = true;
      // this.dialog.boXinTitle = item.model + " (" + item.time + ")";
      // this.dialog.chartData.data[0].name = item.model;
      // this.cause = item.cause;
      // this.model = item.model;
      //
      // this.dialog.form.date = [
      //   this.$moment(item.time)
      //     .subtract(1, "hours")
      //     .format("YYYY-MM-DD HH:mm:ss"),
      //   this.$moment(item.time).add(1, "hours").format("YYYY-MM-DD HH:mm:ss"),
      // ];
      // let params = {
      //   bridgeName: this.bridgeName,
      //   controlName: this.controlName,
      //   startDate: this.dialog.form.date[0],
      //   pointName: item.cause,
      //   endDate: this.dialog.form.date[1],
      //   stationName: this.stationName,
      //   submoduleName: item.model,
      // };
      // this.getXJHistoryPointWaveformData(params);
    },
    // 子模块测点波形
    getXJHistoryPointWaveformData(params) {
      getXJHistoryPointWaveform(params).then((res) => {
        if (res.code == 20000) {
          this.dialog.chartData.xAxis = res.data.map((item) => item.time);
          this.dialog.chartData.data[0].data = res.data.map(
            (item) => item.value
          );
        }
      });
    },

    // 子模块测点告警分析
    getXJHistoryAlarmAnalyseData(params) {
      // getXJHistoryAlarmAnalyse(params).then((res) => {
      //   if (res.code == 20000) {
      //     this.warnNewList = res.data;
      //     try {
      //       if (res.data.length) {
      //         this.warnClick(res.data[0]);
      //       }
      //     } catch (e) {
      //       console.log(e);
      //     }
      //   }
      // });
    },
    // 子模块测点告警信息点击
    warnClick(item) {
      this.criterion = item.criterion;
      this.dialog.form.date = [
        this.$moment(item.time)
          .subtract(1, "hours")
          .format("YYYY-MM-DD HH:mm:ss"),
        this.$moment(item.time).add(1, "hours").format("YYYY-MM-DD HH:mm:ss"),
      ];
      this.cause = item.pointName;
      this.model = item.modelName;
      let params = {
        bridgeName: item.armName,
        controlName: item.controlName,
        startDate: this.dialog.form.date[0],
        pointName: item.pointName,
        endDate: this.dialog.form.date[1],
        stationName: item.stationName,
        submoduleName: item.modelName,
      };
      this.getXJHistoryPointWaveformData(params);
    },
  },
};
</script>
<style scoped lang="less">
.son-container {
  height: 100%;
}

.top {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;

  .fanhui-btn {
    cursor: pointer;
    margin-right: 20px;

    span {
      margin-left: 5px;
    }
  }

  .lujing {
    // margin-left: 50px;
  }
}

.statistics {
  //height: calc(40% - 60px);
  width: 100%;
  height: calc(100% - 60px);
  display: flex;

  .left {
    width: calc((100% - 16px) / 2);
    height: 100%;
    margin-right: 16px;

    ::v-deep .sec-wrapper {
      margin-bottom: 16px;

      &:first-child {
        height: calc((20% - 16px));
      }

      &:nth-child(2) {
        height: calc((40% - 16px));

        .sec-content {
          .right-box {
            display: flex;
            height: calc(100% - 15px);
            margin-top: 15px;
            padding-bottom: 15px;

            ::v-deep .el-descriptions {
              height: 100%;
              overflow-y: auto;
            }

            .right-box-item {
              width: 50%;
              height: 100%;

              .chart-wrapper {
                height: 100%;
              }
            }
          }
        }
      }

      &:last-child {
        height: 40%;
        margin-bottom: 0;
      }
    }

    .sec-container-content {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      .normal,
      .abnormity,
      .breakdown {
        width: 180px;
        height: 100px;
        // border: 1px solid rgb(80, 229, 239);
        margin: 0 32px;
        font-size: 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        color: #fff;
        //box-shadow: 10px 10px 50px rgb(80, 229, 239);
      }

      .normal {
        //background: linear-gradient(to right, #1cbe21, #7ffd84);
        background: #1cbe21;
        //box-shadow: 10px 10px 50px #1cbe21;
      }

      .abnormity {
        //background: linear-gradient(to right, #ffaa00, #fff388);
        background: #ffaa00;
        //box-shadow: 10px 10px 50px #ffaa00;
      }

      .breakdown {
        //background: linear-gradient(to right, #ff3737, #ff6543);
        background: #ff3737;
        //box-shadow: 10px 10px 50px #ff3737;
      }

      //.normal {
      //  background: linear-gradient(to right, #1cbe21, #7ffd84);
      //  box-shadow: 10px 10px 50px #1cbe21;
      //}
      //
      //.abnormity {
      //  background: linear-gradient(to right, #ffaa00, #fff388);
      //  box-shadow: 10px 10px 50px #ffaa00;
      //}
      //
      //.breakdown {
      //  background: linear-gradient(to right, #ff3737, #ff6543);
      //  box-shadow: 10px 10px 50px #ff3737;
      //}
    }
  }

  .right {
    width: calc((100% - 16px) / 2);
    height: 100%;

    .sec-container-content {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;

      .module-item {
        width: calc(100% / 4);
        height: 120px;
      }
    }
  }
}

.scroll {
  height: calc(100% - 25px);
  width: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  &.dialog-scroll {
    display: block;

    .item {
      width: 100%;
      p {
        // height: auto;
      }
    }
  }

  // 里面的每一条
  .item {
    cursor: pointer;
    //height: 64px;
    width: 49%;
    box-sizing: border-box;
    border: 1px solid #006686;
    margin-bottom: 10px;
    padding: 0 10px;

    p {
      line-height: 32px;
      // height: 32px;
      color: #ffffff;
    }

    .tip {
      line-height: 32px;
      height: 32px;
      display: flex;
      justify-content: space-between;

      span {
        color: #eee;
        font-size: 12px;
      }
    }
  }
}

.list-wrapper {
  height: calc(60% - 16px);
  margin-top: 16px;

  .sec-container-content {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;

    .module-item {
      width: calc(100% / 8);
      height: calc(100% / 4);
    }
  }
}

.sec-container-content1 {
  display: flex;
  flex-wrap: wrap;

  .item {
    width: calc(100% / 4);
  }
}

.sec-container-content2 {
  display: flex;
  align-items: center;

  .msg-box {
    height: 100%;
    color: #fff;

    .state {
      line-height: 60px;

      span.state-msg {
        color: #fe545b;
      }
    }

    .result {
      p {
        line-height: 24px;
      }
    }
  }

  .chart-box {
    width: 300px;
    height: 200px;
    margin-left: 50px;
  }
}

.chart-wrapper {
  width: 100%;
  display: flex;

  .left {
    width: calc(50% - 8px);
  }

  .right {
    width: calc(50% - 8px);
    margin-left: 16px;

    h3 {
      line-height: 30px;
      color: #28e9f2;
    }

    p {
      border: 1px solid #3099d1;
      background: rgba(48, 153, 209, 0.2);
      padding: 15px;
      color: #ffffff;
      line-height: 30px;
    }
  }
}

.oscillogram {
  height: 500px;
}

.sec-container-content3 {
  padding: 15px 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;

  .line-wrapper {
    height: 25%;
  }
}

.sec-container-content4 {
  padding: 15px 0;
  height: 100%;

  ::v-deep .el-descriptions {
    height: 100%;
    overflow-y: auto;
  }

  ::v-deep .el-descriptions .el-descriptions__body .el-descriptions-item__cell {
    padding-bottom: 20px;
  }
}

.top_left {
  display: flex;
  align-items: center;
}
</style>
